<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-24 22:34:59
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-25 10:54:43
 * @Description: 任务台账-详情页面-排查问题
 -->

<template>
  <section class="card">
    <div class="header">排查问题：{{handStr(problems).length || 0}}个</div>
    <div style="height: 0.2rem;"></div>
    <mu-paper
      class="lan-card"
      :z-depth="1"
      v-for="(item,index) in handStr(problems)"
      :key="index"
    >
      <div class="c-row">
        <!--<i class="c-dot"></i>-->
        <span class="c-con">排查问题：{{item}}</span>
      </div>
    </mu-paper>

  </section>
</template>

<script>
export default {
  name: 'TroubleShootingCard',
  props: {
      problems:{
        type:String,
      },
  },
  data: function () {
    return {
    }
  },
  methods: {
    handStr(str){
      if(!str){
        return []
      }else{
        let arr = JSON.parse(str || null)
        if(!arr){
          return []
        }else{
          if(arr.filter(o=>o).length){
            return arr
          }else{
            return []
          }
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .card {
    width: 100%;
    padding: 0.14rem;
    border-bottom: 0.01rem solid #EFEFEF;
    background-color: #FFFFFF;

    .header {
      font-size:0.17rem;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(61,61,61,1);
      line-height:0.24rem;
    }

    .c-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      min-height: 0.36rem;
      /*border-bottom: 0.01rem solid #EFEFEF;*/
      .c-con{
        font-size:0.15rem;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(140,140,140,1);
        line-height:0.21rem;
      }
      /*.c-dot {*/
        /*width: 0.05rem;*/
        /*height: 0.05rem;*/
        /*border-radius: 0.05rem;*/
        /*background-color: #F76331;*/
      /*}*/
    }
  }
</style>
